<template>
  <section class="modlude">
    <el-form :inline="true" :model="formSearch" class="form_inline" label-width="80px" size="small">
      <el-form-item label="位号名称">
        <el-input v-model="formSearch.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select v-model="formSearch.type" clearable placeholder="请选择">
          <el-option v-for="item in optionstype" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="读写状态">
        <el-select v-model="formSearch.rw" clearable placeholder="请选择">
          <el-option v-for="item in optionsrw" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="累计标识">
        <el-select v-model="formSearch.accrue" clearable placeholder="请选择">
          <el-option v-for="item in optionsaccrue" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属模板" prop="profileId">
        <el-select v-model="formSearch.profileId" clearable placeholder="请选择所属模板">
          <el-option v-for="item in profileList" :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否可用">
        <el-select v-model="formPush.enable" clearable placeholder="是">
          <el-option v-for="item in optionsenable" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item size="small">
        <el-button size="small" @click="getlist">查 询</el-button>
        <el-button size="small" @click="addDialog = true">新 增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="formData" style="width: 100%" stripe>
      <!-- <el-table-column prop="id" label="模板唯一ID"></el-table-column> -->
      <el-table-column prop="name" label="位号名称"></el-table-column>
      <el-table-column prop="type" label="数据类型">
        <template slot-scope="scope">
          {{tooptionstype(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column prop="rw" label="读写状态">
        <template slot-scope="scope">
          {{tooptionsrw(scope.row.rw)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="base" label="基础值"></el-table-column>
      <el-table-column prop="minimum" label="最小值"></el-table-column>
      <el-table-column prop="maximum" label="最大值"></el-table-column>
      <el-table-column prop="multiple" label="倍数"></el-table-column>
      <el-table-column prop="accrue" label="累计标识">
        <template slot-scope="scope">
          {{scope.row.accrue==true?"累计":"不累计"}}
        </template>
      </el-table-column>
      <el-table-column prop="format" label="数据格式"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="enable" label="是否可用">
        <template slot-scope="scope">
          {{scope.row.enable==true?"是":"否"}}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <!-- <el-table-column prop="profileId" label="模板ID"></el-table-column> -->
      <!-- <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{$root.getDateArray(scope.row.createTime)[9]}}
          </template>
        </el-table-column> -->
      <el-table-column label="操作" fixed="right" width=240>
        <template slot-scope="scope">
          <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
          <el-button type="warning" size="small" @click="xiangqing(2,scope.row)">修 改
          </el-button>
          <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
          <el-button type="danger" size="small" @click="deleInfor(scope.row.id)">删 除
          </el-button>
          <el-button type="" size="small" @click="xiangqing(3,scope.row)">详 情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <paging @changePage=handleCurrentPage :get-total='total'></paging>

    <!-- 添加 -->
    <el-dialog :title="isAddUpdata==1?'新增':isAddUpdata==2?'修改':'详情'" width="40%" :visible.sync="addDialog"
      @closed='closeadd' :close-on-click-modal="false">
      <div class="cont_box_right">
        <el-form :inline="true" class="formdiv" size="small" :model="formPush" ref='addList'
          :disabled="isAddUpdata==3?true:false">
          <el-form-item label="所属模板" prop="profileId" :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
            <el-select v-model="formPush.profileId" clearable placeholder="请选择模板">
              <el-option v-for="item in profileList" :label="item.name" :value="item.id" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="所属模板" >
                  <el-input v-model="formSearch.name" placeholder="请选择模板"></el-input>
                </el-form-item> -->
          <el-form-item label="位号名称" :rules="[{ required: true, message: '该项不能为空', trigger: 'change' }]" size="small"
            prop="name">
            <el-input v-model="formPush.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type" size="small"
            :rules="[{ required: true, message: '该项不能为空', trigger: 'change' }]">
            <el-select v-model="formPush.type" placeholder="请选择">
              <el-option v-for="item in optionstype" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="读/写" prop="rw" size="small"
            :rules="[{ required: true, message: '该项不能为空', trigger: 'change' }]">
            <el-select v-model="formPush.rw" placeholder="请选择">
              <el-option v-for="item in optionsrw" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="累计标识" prop="accrue" size="small"
            :rules="[{ required: true, message: '该项不能为空', trigger: 'change' }]">
            <el-select v-model="formPush.accrue" placeholder="请选择">
              <el-option v-for="item in optionsaccrue" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否可用" prop="enable" size="small">
            <el-select v-model="formPush.enable" placeholder="是">
              <el-option v-for="item in optionsenable" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="倍数" prop="multiple" size="small" :rules="[
            { required: true, message: '该项不能为空',trigger: 'change'},
            { type: 'number', message: '倍数为数字值',trigger: 'change'}
          ]">
            <el-input v-model.number="formPush.multiple"></el-input>
          </el-form-item>
          <el-form-item label="格式" prop="format" size="small"
            :rules="[{ required: true, message: '该项不能为空', trigger: 'change' }]">
            <el-input v-model="formPush.format" placeholder="%.3f"></el-input>
          </el-form-item>
          <el-form-item label="标签" size="small" prop="">
            <el-select v-model="formPush.labelIds" multiple placeholder="请选择标签">
              <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="基值" prop="base" size="small" :rules="[
            { type: 'number', message: '基值为数字值'}
          ]">
            <el-input v-model.number="formPush.base"></el-input>
          </el-form-item>
          <el-form-item label="最小值" prop="minimum" size="small">
            <el-input v-model="formPush.minimum"></el-input>
          </el-form-item>
          <el-form-item label="最大值" prop="maximum" size="small">
            <el-input v-model="formPush.maximum"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit" size="small">
            <el-input v-model="formPush.unit"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="description" size="small">
            <el-input type="textarea" v-model="formPush.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium " @click="closeadd">取 消</el-button>
        <el-button size="medium " v-if="isAddUpdata!=3" @click="addList">提 交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import paging from "../../components/paging"
  import {
    labelSelect, pointConfigAdd, pointConfigList, pointConfigDelete, profileById, profileList, pointConfigUpdate
  } from '../../url/api';

  export default {
    data() {
      return {
        labelList: [],
        formData: [],
        optionstype: [{
          value: 'string',
          label: '字符类型'
        }, {
          value: 'int',
          label: '整数型'
        }, {
          value: 'double',
          label: '双精度浮点型'
        }, {
          value: 'float',
          label: '单精度浮点型'
        }, {
          value: 'long',
          label: '长整型'
        }, {
          value: 'boolean',
          label: '布尔类型'
        }],
        optionsrw: [{
          value: 0,
          label: '读'
        }, {
          value: 1,
          label: '写'
        }, {
          value: 2,
          label: '读写'
        }],
        optionsaccrue: [{
          value: true,
          label: '累计'
        }, {
          value: false,
          label: '不累计'
        }],
        optionsenable: [{
          value: true,
          label: '是'
        }, {
          value: false,
          label: '否'
        }],
        addDialog: false,
        isAddUpdata: 1,
        formPush: {
          rw: 0,
          accrue: false,
          enable: true,
          multiple: 1,
          format: '%.3f',
          base: 0
        },
        formSearch: {
          page: {
            size: 10,
            current: 1,
          }
        },
        total: 0,
        profileList: [],
      }
    },
    methods: {
      tooptionstype(data) {
        let aa = this.optionstype.find(item => item.value == data)
        return aa.label
      },
      tooptionsrw(data) {
        let aa = this.optionsrw.find(item => item.value == data)
        return aa.label
      },
      deleInfor(id) {
        this.$confirm("确定执行此操作吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: id
          }
          pointConfigDelete(params).then((res) => {
            if (res.data.ok) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getlist();
            } else {
              this.$message({
                message: res.data.message,
                type: 'error'
              });
            }
          })
        })
      },
      closeadd() {
        this.formPush = {
          rw: 0,
          accrue: false,
          enable: true,
          multiple: 1,
          format: '%.3f',
          base: 0
        };
        this.$refs.addList.resetFields();
        this.isAddUpdata = 1
        this.addDialog = false;
        // this.disabled = false;
        // this.productvalue ={};
        // console.log("aaaaaa",this.productvalue);
      },
      xiangqing(index, row) {
        this.isAddUpdata = index
        this.formPush = {
          type: row.type,
          name: row.name,
          rw: row.rw,
          base: row.base,
          minimum: row.minimum,
          maximum: row.maximum,
          multiple: row.multiple,
          accrue: row.accrue,
          format: row.format,
          unit: row.unit,
          enable: row.enable,
          profileId: row.profileId,
          description: row.description,
          id: row.id,
          labelIds:row.labelIds
        }
        this.addDialog = true
      },
      addList() {
        this.$refs.addList.validate((valid) => {
          if (valid) {
            // debugger
            // delete this.formPush.projectId
            this.$confirm("确定执行此操作吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let params = this.formPush;
              console.log(params, "aaaaaaaaaaaaaaaaa");
              if (this.isAddUpdata == 1) {
                delete params.id
                pointConfigAdd(params).then((res) => {
                  if (res.data.ok) {
                    this.$message({
                      message: '新增成功',
                      type: 'success'
                    });
                    this.getlist();
                  } else {
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }
                  this.$refs.addList.resetFields();
                  this.addDialog = false
                })
              } else if (this.isAddUpdata == 2) {
                params.id = this.formPush.id
                pointConfigUpdate(params).then((res) => {
                  if (res.data.ok) {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });
                    this.getlist();
                  } else {
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }
                  this.closeadd()
                  // this.addDialog = false
                })
              }

            })

          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      getlist() {
        pointConfigList(this.formSearch).then((res) => {
          //console.log(res)
          if (res.data.ok == true) {
            this.formData = res.data.data.records
            this.total = res.data.data.total * 1
          } else {
            this.$message(res.data.message);
          }
        })
      },
      handleCurrentPage(val) {
        this.formSearch.page.current = val
        this.getlist()
      },
      init() {
        this.getlist();
        profileList({}).then((res) => {
          //console.log(res)
          if (res.data.ok == true) {
            this.profileList = res.data.data.records
            // this.total = res.data.data.total * 1
          } else {
            this.$message(res.data.message);
          }
        });
        labelSelect({}).then((res) => {
          console.log(res);
          if (res.data.ok) {
            this.labelList = res.data.data;
          }
        });
      }
    },
    mounted() {
      this.init();
    },
    components: {
      paging,
    }
  }
</script>
<style scoped>
  .formdiv /deep/ .el-input {
    width: 200px;
  }

  .formdiv /deep/ .el-form-item__label {
    width: 110px;
  }

  /* .cont_box {
        width: 100%;
        display: flex;
      }
      
      .cont_box_left, .cont_box_right {
        flex: 1;
        background: transparent;
        padding: 10px;
      }
      
      .cont_box_left {
        margin-right: 10px;
      }
      
      .margin10 {
        margin-bottom: 10px;
      }
      
      .marginRight {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
      }
      
      .cont_box_right .el-form-item {
        margin-bottom: 20px;
      } */
</style>